// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Popconfirm, Upload, message, Button, Modal, Row, Col, Input, Divider } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
import { reqInform } from 'utils/notification'
// 当前组件样式
import styles from './livePlatformListStyle.less'
import Uploader from '../../../../widget/Upload'
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
import $ from 'jquery'
import Cookie from 'js-cookie'
import { download } from 'utils/util'
//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'

const FormItem = Form.Item
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
}
const formItemLayout2 = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
}
const livePlatformListView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  // modelObj.xxx获取model中状态机的值
  let { modalObj,uusee,actionType} = modelObj


  

  function updateModal() {
    modalObj.visible = !modalObj.visible
    uusee = {}
    resetFields()
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { modalObj,uusee }
    })
  }


  function detailSkip(type, giftId) {
    modalObj.visible = !modalObj.visible
    actionType=type
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { modalObj,actionType }
    })
  }

  function inputChange(value, type) {

    uusee[type] = value
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { uusee }
    })
  }
  //
  function okVerific() {
    dispatch({
      type: `${namespace}/doOkVerific`,
    })

  }

  // 编辑
  function editSkip(type, item) {
    let obj = {
      uuseeName:item.uuseeName,
      uuseeAppId:item.uuseeAppId,
      id:item.id
    }
    uusee=obj
    modalObj.visible = !modalObj.visible
    actionType = type
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { uusee,modalObj,actionType}
    })
  }

  // 删除
  function deleteItem(item = {}) {
    dispatch({
      type: `${namespace}/deleteIUusee`,
      payload: {
        ...item
      }
    })
  }

  // 新增直播平台
  function addOrEditUusee(actionType){
    form.validateFields((err, values) => {
		  if(!err){
        dispatch({
          type: `${namespace}/checkUusee`,
          payload:{actionType,resetFields}
        })
		  }
		});
    
  }
  // 分页表格属性配置
  let pageProps = {
    // ---------- 界面部分 ----------
    'ui': {
      // 页面接口地址
      'api_url': 'admin/uuseeConfig/queryList',
      // 接口方式
      'method': 'POST',
      'app': '',
      // 接口参数
      'params': '',
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      'mockData': null,
      // 查询栏
      'search_bar': {
        'fields': [
          {
            en_name: 'uuseeName',
            zh_name: '平台名称',
            elem_type: 'Input',
            elem_valid_type: 'string'
          },
          {
            en_name: 'uuseeAppId',
            zh_name: '平台ID',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
        ],
        searchHandler: (p) => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click', p)
        },
        resetHandler: (p) => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click', p)
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'carName',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格
      'table': {
        'status_params': 'status=0',
        'status_text': '全部',
        'scroll': { x: 1200 },
        // 表头字段列表"
        'fields': [
          {
            'en_name': 'uuseeName',
            'zh_name': '平台名称',
          },
          {
            'en_name': 'uuseeAppId',
            'zh_name': '平台ID',
          },
          {
            'en_name': 'createPerson',
            'zh_name': '创建人',
          },
          {
            'en_name': 'createTime',
            'zh_name': '创建时间',
          },
          {
            'en_name': 'updateTime',
            'zh_name': '更新时间',
          },
          {
            'en_name': 'updatePerson',
            'zh_name': '更新人',
          },
          {
            en_name: "edit",
            zh_name: "操作",
            render: (a, item, index, d, e, f) => {
              return (
                <span>

                  <FlagBtn node={<a onClick={() => editSkip('edit', item)}>编辑<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                  
                  <FlagBtn node={<Popconfirm Collapse title={`确定要删除吗？`} okText='确定' cancelText='取消' onConfirm={() => deleteItem(item)}>
                      <a href='javascript:void(0)' onClick={(e) => {}}>删除
                          </a>
                 </Popconfirm>} btnId={''}> </FlagBtn>

      
                 
                </span>
              )
            },
          }

        ],

        'actions': [
        ],
        action_props: {
          fixed: "right",
          width: 210
        }
      },
      // 操作栏
      action_bar: [
        {
          'func_name': 'add',
          'label': '新增直播平台',
          btnId: '20401',
          'type': 'primary',
          'onClick': (e) => {
            detailSkip("add")
          }
        }
      ],
    },
  }

  if (!!modelObj.biz) {
    pageProps.biz = modelObj.biz
    pageProps.biz.syncBackCbf = (biz) => {
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { biz }
      })
    }
  }

  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps} />
      <Modal
        title={'新增直播平台'}
        width='460px'
        // className="pubBiz_CommonModel"
        visible={modalObj.visible}
        // visible='false'
        onOk={() => {addOrEditUusee()}}
        onCancel={() => { updateModal() }}
      >
        <div className={styles.detailContainer}>
          <Form>
            <Row>
              <Col span={18}>
                <FormItem
                  {...formItemLayout2}
                  label="平台名称">
                  {getFieldDecorator('uuseeName', {
                    initialValue: uusee.uuseeName ? uusee.uuseeName : '',
                    rules: [
                      { required: true, whitespace: true, message: '请输入平台名称' }
                    ],
                  })(<Input
                    // disabled={checkBtn === false}
                    placeholder={'请输入平台名称'}
                    onChange={(e) => { inputChange(e.target.value, 'uuseeName') }}
                  />)}
                </FormItem>
              </Col>
              <Col span={18}>
                <FormItem
                  {...formItemLayout2}
                  label="平台AppId">
                  {getFieldDecorator('uuseeAppId', {
                    initialValue: uusee.uuseeAppId ? uusee.uuseeAppId : '',
                    rules: [
                      { required: true, whitespace: true, message: '请输入平台AppId' }
                    ],
                  })(<Input
                    // disabled={checkBtn === false}
                    placeholder={'请输入平台AppId'}
                    onChange={(e) => { inputChange(e.target.value, 'uuseeAppId') }}
                  />)}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </Modal>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(livePlatformListView))
